﻿
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>动态生成Word</title>
        <!--pageoffice.js一定要引用--->
        <script type="text/javascript" src="../pageoffice.js"></script>
        <script type="text/javascript">
            function ConvertFile() {
                document.getElementById("Button1").disabled = true;

                var saveFileUrl = "/FileMakerSingle/SaveDoc";
                var openFileUrl = "/FileMakerSingle/FileMakerSingle";
                filemakerctrl.SaveFilePage = saveFileUrl;

                filemakerctrl.CallFileMaker({
                url: openFileUrl,
                success: function (res) {//res：获取服务器端fs.CustomSaveResult设置的保存结果
                    console.log(res);
                    console.log("completed successfully.");
                        setProgress(100);
                    },
                    progress: function (pos) {
                        console.log("running " + pos + "%");
                        setProgress(pos);
                    },
                    error: function (msg) {
                        console.log("error occurred: " + msg);
                    }
                });
            }

            function setProgress(percent) {
                var progressBar = document.getElementById("progressBar");
                progressBar.style.width = percent + '%';
                progressBar.innerText = percent + '%';
            }
        </script>
        <style>
            #progressBarContainer {
                width: 500px;
                background-color: #e0e0e0;
                border-radius: 5px;
                padding: 3px;
                margin: 10px auto;
            }

            #progressBar {
                height: 20px;
                width: 0%;
                background-color: #76b900;
                border-radius: 5px;
                text-align: center;
                line-height: 20px; /* 使文字垂直居中 */
                color: white;
            }
        </style>
    </head>
    <body style="text-align: center;">
        <div style="text-align: center;">
            <h3 style="margin:20px;">演示：模拟后台填充数据到Word模板生成文件的效果</h3>
            <div style="width:650px;margin: 0 auto; font-size:14px;">
                <p style="text-align: left;">
                    演示内容：<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;本示例演示了调用FileMaker对象在客户端动态生成Word文件并自动保存到服务器上，却不显示打开文件界面的功能，模拟了直接在服务器端填充数据到Word模板生成文件的效果。
                </p>
                <p style="text-align: left;">
                    操作说明：<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;1. 点击“生成Word文件”按钮，执行动态填充数据到荣誉证书模板“template.doc”的程序，生成一份真正的荣誉证书文件。<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;2. 生成完毕后，即可在“FileMakerSingle/doc”目录下看到生成的Word文件：maker.doc。
                </p>
            </div>
            <input id="Button1" type="button" value="生成Word文件" onclick="ConvertFile()" />
            <div id="progressBarContainer">
                <div id="progressBar"></div>
            </div>
        </div>
    </body>
</html>
